<template>
  <el-dialog title="新增文章" :visible="showDialog" @close="btnAddCancel">
    <el-form
      ref="addContent"
      label-width="100px"
      :model="articleForm"
      :rules="rules"
    >
      <el-form-item label="文章标题：" prop="title">
        <el-input
          v-model="articleForm.title"
          placeholder="请输入文章标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容：" prop="content">
        <!-- 富文本框 -->
        <quill-editor
          style="width: 100%"
          v-model="articleForm.content"
          ref="myQuillEditor"
          :options="editorOption"
          class="editor"
        >
        </quill-editor>
        <!-- 富文本框 -->
      </el-form-item>
      <el-form-item label="视频地址：" prop="video">
        <el-input placeholder="请输入视频地址"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="btnAddCancel">取消</el-button>
      <el-button type="primary" @click="btnAddOK">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 组件中挂载富文本
import 'quill/dist/quill.snow.css'
import Article from '@/api/hmmm/articles'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'bullet' }, { list: 'ordered' }],
  ['image', 'link']
]

export default {
  components: {
    quillEditor
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      articleForm: {
        title: '', // 文章标题
        content: '' // 文章内容
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        }
      }
    }
  },
  computed: {},
  methods: {
    async btnAddOK () {
      try {
        this.$emit.addContent.validate()
        await Article.add(this.articleForm)
        this.$emit('update:showDialog', false)
        this.$message.success('新增成功')
      } catch (error) {}
    },
    btnAddCancel () {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
